<template>
  <div id="mySale-operate">
    <div class="filter-box">
      <div class="top-box">
          <div class="box-title">发货信息</div>
          <a-button type="primary" @click="confirmSend">确认发货</a-button>
      </div>
      <a-row class="info">
        <a-col :span="8">
            <span class="stars">*</span>
            <span class="info-left">发货项目</span>
            <a-input
              v-model="detailData.saleProjectName"
              disabled
              placeholder="请输入送货车牌号"
              style="width: 250px;"
            />
        </a-col>
        <a-col :span="8">
          <span class="stars">*</span>
            <span class="info-left">发货组织</span>
            <a-input
              v-model="detailData.saleOrgName"
              placeholder="请输入送货车牌号"
              disabled
              style="width: 250px;"
            />
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
          <span class="stars">*</span>
            <span class="info-left">发货仓库</span>
            <a-select
              v-model="form.recWarehouseId"
              style="width: 250px;"
              :filterOption="filterOption"
              :showSearch="true"
              allowClear
              @popupScroll="popupScroll"
              @search="searchWarehouseId"
              @change="searchWarehouseId2"
              placeholder="请选择发货仓库">
                <a-select-option
                  v-for="(item,index) in warehouses"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
          <span class="stars">*</span>
            <span class="info-left">送货车牌号</span>
            <a-input
              v-model="form.carNum"
              placeholder="请输入送货车牌号"
              style="width: 250px;"
            />
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
            <span class="info-left">司机驾驶证照片</span>
            <Upload
              :defaultList="driverFiles"
              @change="handleDriverUpload"
              @remove='handleDriverRemove'
              :limit="8"
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">其他照片</span>
            <Upload
              :defaultList="files"
              @change="handleOtherUpload"
              @remove='handleOtherRemove'
              :limit="8"
            />
        </a-col>
      </a-row>
    </div>
    <div class="container">
      <div class="container-title">发货明细</div>
      <div class="title-info">
        <!-- <span class="info-left">项目：</span><span class="info-right">{{ncProjectName}}</span>
        <span class="info-left">所属组织：</span><span>{{orgName}}</span> -->
      </div>
      <div class="order-table">
        <a-row class="table-header">
          <a-col :span="1" ><a-checkbox v-model="checkAll" @change="changeCheckAll">
              </a-checkbox></a-col>
          <a-col :span="8" class="header-item">商品</a-col>
          <a-col :span="3" class="header-item">预订单价</a-col>
          <a-col :span="3" class="header-item">预订数量</a-col>
          <a-col :span="3" class="header-item">可发货数量</a-col>
          <a-col :span="3" class="header-item">调出单价</a-col>
          <a-col :span="3" class="header-item">调出数量</a-col>
        </a-row>
      </div>
      <div class="table-item" v-for="(item, index) in tabelData" :key="index">
          <a-row class="table-item-body">
            <a-col :span="1">
              <a-checkbox v-model="item.check"  @change="checkItem(item)">
              </a-checkbox>
            </a-col>
            <a-col :span="8" class="flex-row">
              <img :src="item.goodsPic" class="table-pic" />
              <div class="table-info">
                <p class="info-name">{{ item.ncMaterielName }}</p>
                <p>规格：{{ item.goodsSpec }}</p>
                <p>单位：{{ item.goodsUnit }}</p>
              </div>
            </a-col>
            <a-col :span="3" class="item-col">
              ￥{{ item.buyPrice }}
            </a-col>
            <a-col :span="3" class="item-col">
              {{ item.buyNumber }}
            </a-col>
            <a-col :span="3" class="item-col">
              {{ item.keSendNum }}
            </a-col>
            <a-col :span="3">
              <a-input-number
                v-model="item.sendPrice"
                placeholder="请输入发货单价"
              />
            </a-col>
            <a-col :span="3">
              <a-input-number
                v-model="item.sendNumber"
                placeholder="请输入发货数量"
                @blur="handlSendNumber(item,index)"
              />
            </a-col>
          </a-row>
        </div>
        <div class="table-empty" v-if="!tabelData.length">
          <img src="@/assets/images/empty.png" />
          <span>暂无数据</span>
        </div>
      <!-- <div class="page-box">
        <a-pagination
          size="small"
          :total="pageConfig.total"
          show-quick-jumper
          :show-total="(total) => `总共 ${pageConfig.total} 条数据`"
          @change="changePage"
        />
      </div> -->
    </div>
    <div class="filter-box">
        <div class="top-box">
            <div class="box-title">收货信息</div>
        </div>
        <a-row class="info">
        <a-col :span="8">
            <span class="info-left">购入项目</span>
            <a-select
                v-model="detailData.ncProjectName"
                style="width: 250px;"
                :showSearch="true"
                disabled
                allowClear
                placeholder="请选择购入项目">
                <a-select-option
                  v-for="(item,index) in projects"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
            <span class="info-left">购入仓库</span>
            <a-select
              v-model="detailData.warehouseName"
              style="width: 250px;"
              :showSearch="true"
              disabled
              allowClear
              placeholder="请选择购入仓库">
                <a-select-option
                  v-for="(item,index) in warehouses"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="8">
            <span class="info-left">购入组织</span>
            <a-select v-model="detailData.orgName" style="width: 250px;" disabled  allowClear placeholder="请选择购入组织">
                <!-- <a-select-option
                  v-for="(item,index) in typeOne"
                  :key="index"
                  :value="item.value"
                  >
                  {{ item.label }}
                </a-select-option> -->
          </a-select>
        </a-col>
      </a-row>
      <a-row class="info">
        <a-col :span="8">
            <span class="info-left" style="padding-left: 15px;">联系人</span>
            <a-input
              v-model="detailData.recMan"
              placeholder="请输入联系人"
              disabled
              style="width: 250px;"
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">联系电话</span>
            <a-input-number
              v-model="detailData.recPhone"
              disabled
              placeholder="请输入联系电话"
              style="width: 250px;"
            />
        </a-col>
        <a-col :span="8">
            <span class="info-left">订单编号</span>
            <a-input
              v-model="detailData.shopOrderSn"
              placeholder="请输入订单编号"
              style="width: 250px;"
              disabled
            />
        </a-col>
      </a-row>
      <a-row class="info">
          <a-col :span="15" class="address">
                <span class="info-left">收货地址</span>
                <a-textarea
                    v-model="detailData.recAddress"
                    disabled
                    placeholder="请填写收货地址"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
          </a-col>
      </a-row>
    </div>
    <a-modal
      v-model="showVisible"
      title=""
      cancel-text="返回"
      ok-text="打印发货单"
      style="text-align: center;"
      @ok="handleOk"
      @cancel="handleCancel">
      <p class="model-icon"><a-icon type="check-circle" class="icon" /></p>
      <p class="model-text">发货成功</p>
      <!-- <p>请等待出售方发货</p> -->
    </a-modal>
    <a-modal v-model="visiblePrinting" width="80%" :centered="true" :closable="false" :footer="null">
      <div class="printModalWrap" id="printModalWrap">
        <div class="print-title">调拨发货单</div>
        <div class="print-middle">
          <div class="middle-left">
            <div class="middle-left-item">调出项目：{{detailData.saleProjectName}}</div>
            <div class="middle-left-item">调出组织：{{detailData.saleOrgName}}</div>
            <div class="middle-left-item">发货仓库：{{form.recWarehouseName}}</div>
            <div class="middle-left-item">调入项目：{{detailData.ncProjectName}}</div>
            <div class="middle-left-item">调入组织：{{detailData.orgName}}</div>
            <div class="middle-left-item">调入仓库：{{detailData.warehouseName}}</div>
            <div class="middle-left-item">送货车牌号：{{form.carNum}}</div>
            <div class="middle-left-item">联系人：{{detailData.recMan}}</div>
            <div class="middle-left-item">联系电话：{{detailData.recPhone}}</div>
            <div class="middle-left-item">订单编号：{{detailData.shopOrderSn}}</div>
            <div class="middle-left-item" style="width:66.66%">收货地址：{{detailData.recAddress}}</div>
          </div>
          <DataTable :expand="false" :tableColumn="tableColumn" :tableData="tabelData" :showConfig="false"></DataTable>
          <div class="qianzi">
            <div>调出方签字/盖章：</div>
            <div>调入方签字/盖章：</div>
          </div>
        </div>

      </div>
      <div class="print-bottom">
        <a-button type="primary" @click="handlePrint" style="margin-right: 20px;">打印</a-button>
        <a-button type="dashed" @click="visiblePrinting = false">取消</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script lang='ts'>
import { Validate } from '@/decorator'
import { Component, Watch, Vue } from 'vue-property-decorator'
import util from '@/util/util'
import print from 'print-js'
@Component
export default class aduit extends Vue {
  visiblePrinting:boolean = false
  form: any = {
    recWarehouseId: undefined,
    recWarehouseName: undefined,
    carNum: undefined
  }
  warehPage:any = 1
  detailData: any = []// 详情数据
  tabelData: any = []// 表格数据
  projects: any = [] // 购入项目列表
  warehouses: any = [] // 购入仓库
  checkGoodsList: any = [] // 选中的商品列表
  ncProjectName: any = '' // 项目名称
  orgName: any = '' // 组织名称
  checkAll:boolean= false
  showVisible:boolean= false
  driverFiles: any = [] // 驾驶证图片
  files: any = [] // 其他图片
warehouseIdVal:any = ''
tttt:any = null
  get shopOrderTitleId () {
    return this.$route.query.shopOrderTitleId
  }
  tableColumn:any = {
  ncMaterielName: {
      label: '物料名称'
    },
    goodsUnit: {
      label: '单位'
    },
    buyNumber: {
      label: '预订数量'
    },
    buyPrice: {
      label: '预订单价'
    },
    sendNumber: {
      label: '调出数量'
    },
    sendPrice: {
      label: '调出单价'
    }
  }


  init () {
    this.getDetail()
  }
  getDetail () {
    let data = {
      titleId: this.shopOrderTitleId
    }
    this.$api.orderMyDetailFetch(data).then((res: any) => {
      this.detailData = res.data
      this.tabelData = res.data.shopOrders.map((item:any) => ({...item, sendPrice: item.buyPrice, sendNumber: item.keSendNum}))
      this.getWarehouses()
    });
  }
  changePage () {}
  getProjects () {
    this.$api.memberProjectListFetch().then((res: any) => {
      this.projects = res.data.map((item: any) => ({label: item.name, value: item.id, pkOrg: item.pkOrg}))
    })
  }
  //  输入发货数量
  handlSendNumber (item:any, index:any) {
    if (item.sendNumber > item.keSendNum) {
      this.$message.error('调出数量不能大于可发货数量')
      item.sendNumber = item.keSendNum
    }
  }
  // 滚动选择框时执行
  popupScroll (e:any) {
    const { scrollHeight, scrollTop, clientHeight } = e.target
      if (Math.floor(scrollHeight - scrollTop) === clientHeight) {
        this.warehPage++
        this.getWarehouses()
      }
  }
  handlePrint () {
    const style = `@page { margin: 20px; } .flex {display: flex} @media print{}
        .printModalWrap{
          width: 100%;
          margin-bottom: 20px;
          border: 1px solid #8a8a8a;
        }
        .print-title{
          line-height: 44px;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
          border-bottom: 1px solid #8a8a8a;
        }
        .print-middle{

        }
        .middle-left{
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 10px;
          padding: 10px 15px;
        }
        .middle-left-item{
          width: 33.33%;
          line-height: 26px;
          padding-right: 10px;
        }
        .print-table{
          padding: 10px 15px;
        }
        .qianzi{
          display: flex;
          padding: 20px 15px;
        }
        .qianzi>div{
          flex:1
        }
        .print-table-bottom{
          line-height: 40px;
          display: flex;
          justify-content: space-between;
        }
    `
    print({
        printable: 'printModalWrap',
        type: 'html',
        documentTitle: '',
        css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.css', ''],
        style: style,
        scanStyles: false
    })
  }
  searchWarehouseId2 (val:any) {
    console.log(val)
    // this.warehouseIdVal = val
      // clearTimeout(this.tttt)
      // this.tttt = setTimeout(() => {
      //   this.warehPage = 1
      //   this.warehouses = []
      //   this.getWarehouses()
      // }, 500);
  }
  searchWarehouseId (val:any) {
    console.log(val, 'sisi')
    this.warehouseIdVal = val
      clearTimeout(this.tttt)
      this.tttt = setTimeout(() => {
        this.warehPage = 1
        this.warehouses = []
        this.getWarehouses()
      }, 500);
  }
  // 仓库列表
  getWarehouses () {
    let warehouses = []
    let data = {
      ncProjectId: this.detailData.saleProjectId,
      pkOrg: this.detailData.salePkOrg,
      page: this.warehPage,
      size: 100,
      searchValue: this.warehouseIdVal
    }
    this.$api.orderWarehousePageFetch(data).then((res: any) => {
      warehouses = res.data.records.map((item: any) => ({label: item.ncWarehouseName, value: item.ncWarehouseId}))
      this.warehouses = this.warehouses.concat(warehouses)
    })
  }
  // 确认发货
  confirmSend () {
    let details:any = []
    let driverFiles:any = []
    let receiveFiles:any = []
    let files:any = []
    let obj :any = {}
    if (this.form.recWarehouseId === undefined) return this.$message.error('请选择发货仓库')
    if (this.form.carNum === undefined) return this.$message.error('请输入送货车牌号')
    if (this.checkGoodsList.length === 0) return this.$message.error('请先选择商品')
    if (this.driverFiles.length == 0) return this.$message.error('请先选择司机驾驶证照片')
    if (this.files.length == 0) return this.$message.error('请先选择其他照片')
    details = this.checkGoodsList.map((item:any) => (
      {
        goodsId: item.goodsId,
        buyNumber: item.buyNumber,
        buyPrice: item.buyPrice,
        sendPrice: item.sendPrice,
        sendNumber: item.sendNumber,
        unitPrice: item.unitPrice,
        orderNumber: item.number,
        shopOrderId: item.orderId
      }))
    driverFiles = this.driverFiles.map((item:any) => ({fileUrl: item.url}))
    files = this.files.map((item:any) => ({fileUrl: item.url}))

    obj = this.warehouses.find((item:any) => { return item.value === this.form.recWarehouseId })
    this.form.recWarehouseName = obj.label
    for (let i = 0; i < this.checkGoodsList.length; i++) {
      if (this.checkGoodsList[i].sendPrice === 0) return this.$message.error('请输入发货单价')
      if (this.checkGoodsList[i].sendNumber === 0) return this.$message.error('请输入发货数量')
    }
    this.form.titleId = this.shopOrderTitleId
    this.form.orderSn = this.detailData.shopOrderSn
    this.form.sendTime = this.$util.format(new Date())
    let data = {
      ...this.form,
      driverFiles,
      files,
      details
    }

    this.$api.orderDeliverGoods2Fetch(data).then(() => {
      this.showVisible = true
    })
  }
  // 上传驾驶证图片
  handleDriverUpload (fileList: any) {
    this.driverFiles = fileList;
  }
  // 移除驾驶证图片
  handleDriverRemove (file:any) {
       this.driverFiles = this.driverFiles.filter((item:any) => {
        return item.url !== file.url;
      })
  }
  // 上传其他图片
  handleOtherUpload (fileList: any) {
    console.log(fileList, 'fileListfileList')
    this.files = fileList;
  }
  // 移除其他图片
  handleOtherRemove (file:any) {
       this.files = this.files.filter((item:any) => {
        return item.url !== file.url;
      })
  }
  // 选择每项
  checkItem (item:any) {
    let newArr :any = []
    if (item.check === true) {
      this.checkGoodsList.push(item)
    } else {
      this.checkGoodsList.forEach((element:any, index:any) => {
        if (element.goodsId !== item.goodsId) {
            newArr.push(this.checkGoodsList[index])
        }
      });
      this.checkGoodsList = newArr
    }
    console.log(this.checkGoodsList);
  }
  // 全选
  changeCheckAll () {
    let newArr :any = []
    for (let i = 0; i < this.tabelData.length; i++) {
      this.$set(this.tabelData[i], 'check', this.checkAll)
      if (this.tabelData[i].check === true) {
        this.checkGoodsList.push(this.tabelData[i])
      } else {
        this.checkGoodsList = newArr
      }
    }
    console.log(this.checkGoodsList);
  }
  // 弹框确认
  handleOk () {
    this.showVisible = false
    this.visiblePrinting = true
    // this.$router.replace({
    //   path: '/allot/mySale/detail',
    //   query: {
    //     shopOrderTitleId: this.shopOrderTitleId
    //     }
    //   })
  }
  // 弹框返回
  handleCancel () {
    this.showVisible = false
    this.$router.back()
  }
  // 过滤
  filterOption (value:any, option:any) {
    return option.componentOptions.children[0].text.indexOf(value) >= 0
  }
}
</script>
<style lang="scss" scoped>
#mySale-operate {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .stars{
          color: #E14C46;
          margin-right: 5px;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;

        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .table-item{
      .table-item-body {
        border-bottom: 1px solid #F1F1F1;
        // border-top: 1px solid #F1F1F1;
        // margin-bottom: 16px;
        .ant-col {
            height: 152px;
            padding: 16px 20px;
            border-right: 1px solid #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #333;
            &:last-child {
                border-right: none;
            }
            p {
                margin-bottom: 0;
            }
            .table-pic {
                max-width: 160px;
                width: 50%;
                height: 120px;
                display: block;
                object-fit: cover;
                margin-right: 24px;
            }
            .table-info {
                display: flex;
                flex-direction: column;
                p {
                    font-size: 13px;
                    color: #999;
                }
                .info-name {
                    // @include limitLine(2);
                    margin-bottom: 16px;
                    font-size: 14px;
                    color: #000;
                    font-weight: 700;
                    // cursor: pointer;
                    // &:hover {
                    //     text-decoration: underline;
                    // }
                }
            }
        }
        .flex-row {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            .ant-btn {
                margin-right: 12px;
                font-size: 12px;
            }
        }
        .item-col{
          text-align: center;
        }

    }
  }

}
.printModalWrap{
      width: 100%;
      margin-bottom: 20px;
      // min-height: 500px;
      border: 1px solid #8a8a8a;
      .print-title{
        line-height: 44px;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        border-bottom: 1px solid #8a8a8a;
      }
      .print-middle{
        .middle-left{
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 10px;
          padding: 10px 15px;
          .middle-left-item{
            width: 33.33%;
            line-height: 26px;
            padding-right: 10px;
          }
        }
        .middle-right{
          width: 250px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .logo-img{
            width: 100px;
          }
        }
      }
      .print-table{
        padding: 10px 15px;
        .print-table-bottom{
          line-height: 40px;
          display: flex;
          justify-content: space-between;
          .table-bottom-left{
            display: flex;
          }
          .table-bottom-right{
            padding-right: 50px;
          }
        }
      }
      .qianzi{
        display: flex;
        padding: 20px 15px;
        div{
          flex:1
        }
      }
    }
.print-bottom{
  padding: 10px 0;
    display: flex;
    justify-content: center;
  }
.model-icon{
  color: green;

  .icon{
    font-size: 50px;
  }
}
.model-text{
  font-weight: 700;
  font-size: 16px;
}
.container{
  padding-bottom: 30px;
  border-bottom: 20px solid #ebf0f5;
  height: 450px;
  overflow-x: hidden;
	overflow-y: scroll;
}
.container::-webkit-scrollbar{
	display: none;
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
